<template>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">expand</el-radio-button>
    <el-radio-button :value="true">collapse</el-radio-button>
  </el-radio-group> -->
    <div class="menu-container">
        <el-menu :default-active="menu_index" class="el-menu-vertical-demo" :collapse="isCollapse">
            <el-menu-item index="1-1" @click="toPath('/')">
                <img class="icon" src="../../assets/icon/home.svg" alt="">
                <template #title>首页</template>
            </el-menu-item>
            <el-menu-item index="1-2" @click="toPath('/classify')">
                <img class="icon" src="../../assets/icon/classify.svg" alt="">
                <template #title>分类</template>
            </el-menu-item>
            <el-menu-item index="1-3" @click="toPath('/community')">
                <img class="icon" src="../../assets/icon/bbs.svg" alt="">
                <template #title>社区</template>
            </el-menu-item>
            <el-menu-item index="1-4" @click="toPath('/subscription')">
                <img class="icon" src="../../assets/icon/subscription.svg" alt="">
                <template #title>订阅</template>
            </el-menu-item>
            <el-menu-item index="1-5" @click="toPath('/rankingList')">
               <img class="icon" src="../../assets/icon/rankingList.svg" alt="">
                <template #title>榜单</template>
            </el-menu-item>
            <hr>

            <el-menu-item index="5">
              <img class="icon" src="../../assets/icon/setting.svg" alt="">
        
                <template #title>设置</template>
            </el-menu-item>
        </el-menu>
    </div>
    <div id="contactBox">
        <ul id="contact">
            <li>联系我们</li>
            <li>18378343161</li>
            <li>loco60y3@163.com</li>
            <li></li>
            <li>
                <a href="">关于我们</a>
                <a href="">招贤纳士</a>
            </li>
            <li>测ICP备18018378343161号</li>
            <li>©版权所有 2025柒拾云工作室</li>
        </ul>

    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapse: false,
            menu_index: 1
        }
    },
    watch: {
        $route(to) {
            this.menu_index = to.meta.index;
            console.log(this.menu_index);

        }
    },
    mounted() {

    }, methods: {

        toPath(key) {
            this.$router.push(key);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
    // 创建后
    created() {

    },

}
</script>

<style scoped>
.icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: top;
}
</style>

<style>
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title,
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
    padding: 10px;
}



.menu-container .el-menu-item {
    height: 50px;
    border-radius: var(--raduis);
    margin: 10px 5px;
}

.el-menu-item:hover {
    background-color: #f2f2f2;
}

.menu-container .el-menu-item.is-active {
    background-color: #f2f2f2;
    color: black;
    font-weight: bold;
}

#contactBox {
    display: flex;
    height: 300px;
    align-items: flex-end
}

#contact {

    padding: 0;
    font-size: 12px;
    margin-left: 14px;
    color: var(--small_fontColor);

    li {
        margin-bottom: 3px;
    }
}

hr {
    border: #f2f2f2 1px solid;
    width: 175px;
}
</style>